<script setup lang="ts">
import QRCode from "qrcode";
import $api from "@/api";
import useUserStore from "@/store/modules/useUserStore";

const emit = defineEmits<{
  (e: "update:show", val: boolean): void;
}>();
const message = useMessage(),
  userStore = useUserStore();
const code = ref(""),
  url = ref(""),
  status = ref(0);
let timeId: any = -1;
function checkLoginStatus() {
  $api.bili.getLoginStatus(code.value).then(data => {
    if (data.code == 0) {
      //已确认
      userStore.setToken(data.refresh_token);
      $api.bili.getBaseUserInfo().then(value => {
        message.success("登陆成功");
        emit("update:show", false);
      });
      return;
    }
    if (data.code == 86038) {
      //二维码已失效
      status.value = 1;
    }
    if (data.code == 86101) {
      //未扫码
    }
    if (data.code == 86090) {
      //已扫码未确认
      status.value = 3;
    }
    timeId = setTimeout(() => {
      checkLoginStatus();
    }, 5000);
  });
}
function getLoginCode() {
  $api.bili
    .getQRCode()
    .then(data => {
      code.value = data.qrcode_key;
      return Promise.resolve(data.url);
    })
    .then(data => {
      return QRCode.toDataURL(data);
    })
    .then(data => {
      url.value = data;
      checkLoginStatus();
    });
}
function onModalEnter() {
  refreshCode();
}
function onModalLeave() {
  if (timeId != -1) {
    clearTimeout(timeId);
  }
}
function refreshCode() {
  code.value = "";
  url.value = "";
  status.value = 0;
  getLoginCode();
}
</script>

<template>
  <n-modal
    preset="card"
    class="w-120"
    :on-after-enter="onModalEnter"
    :on-after-leave="onModalLeave"
    @update:show="$emit('update:show', $event)"
  >
    <div class="flex-col flex-cc">
      <div class="text-2xl font-bold mb-5">扫描二维码登录</div>
      <div class="bili-scan w-60 h-60 relative">
        <img class="bili-code wh-full" :src="url" />
        <div v-if="status == 0" class="bili-tips wh-full abso-lt invisible">
          <img
            class="wh-full object-cover"
            src="https://s1.hdslb.com/bfs/seed/jinkela/short/mini-login/img/qr-tips.51ff2bcf.png"
          />
        </div>
        <div
          v-if="status != 0"
          class="bili-code-tips wh-full abso-lt flex-col flex-cc bg-light-100 bg-opacity-90 text-base"
        >
          <template v-if="status == 1">
            <img
              class="w-8 h-8 p-4 mb-2 bg-light-100 rounded-full"
              src="@/assets/images/refresh.png"
              @click="refreshCode"
            />
            <div>二维码已过期</div>
            <div>请点击刷新</div>
          </template>
          <template v-if="status == 3">
            <div>扫码成功</div>
            <div>请在手机上确认</div>
          </template>
        </div>
      </div>
      <div>
        <span>请使用</span>
        <a href="https://app.bilibili.com/" target="_blank">哔哩哔哩客户端</a>
        <span>扫码登录</span>
      </div>
    </div>
  </n-modal>
</template>

<style scoped lang="scss">
.bili-scan:hover {
  .bili-tips {
    visibility: visible;
    background: white;
  }
}
</style>
